import { CHANGED_SELECTION } from "./action";
import { Action, Contact } from "./interface";

interface ContactListProps {
  contacts: Contact[];
  selectedId: number;
  dispatch: React.Dispatch<Action>;
}

function ContactList({ contacts, selectedId, dispatch }: ContactListProps) {
  return (
    <section className="contact-list">
      <ul>
        {contacts.map(contact => (
          <li key={contact.id}>
            <button
              onClick={() => {
                // TODO: dispatch action
                dispatch({
                  type: CHANGED_SELECTION,
                  payload: {
                    contactId: contact.id
                  }
                });
              }}
            >
              {selectedId === contact.id ? <b>{contact.name}</b> : contact.name}
            </button>
          </li>
        ))}
      </ul>
    </section>
  );
}

export default ContactList;
